<template>
  <tbc-dialog ref="dialog" title="高级搜索" width="900px">
    <el-form label-position="top" class="compact">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="商品名称">
            <el-input v-model="filter.keyword" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="商品分类">
            <tbc-selector api="/goods.category" :check-strictly="true" style="width:100%"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="商品类型">
            <el-select v-model="filter.goods_type" style="width: 100%">
              <el-option
                  :label="item.label"
                  v-for="(item, idx) in [
                  {value: 0, label: '全部'},
                  {value: 1, label: '普通商品'},
                  {value: 2, label: '虚拟商品'},
                  {value: 3, label: '资源商品'}]"
                  :key="idx" :value="item.value">
                {{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="使用积分">
            <el-radio-group v-model="filter.use_integral_type">
              <el-radio
                  :label="item.value"
                  v-for="(item, idx) in [
                      {label: '全部', value: 0},
                      {label: '不允许使用', value: 1},
                      {label: '积分加现金', value: 2},
                      {label: '积分或现金', value: 3},
                      {label: '只允许积分', value: 4},
                  ]"
                  :key="idx">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="商品价格">
            <el-input-number v-model="filter.min_price" controls-position="right"
                             :min="0"
                             placeholder="最低价"
                             clearable
                             style="width: 44%"></el-input-number>
            <span style="margin:0 10px"> ~ </span>
            <el-input-number v-model="filter.max_price" controls-position="right"
                             :min="(Number)(filter.min_price)"
                             placeholder="最高价"
                             clearable
                             style="width: 44%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="销售状态">
            <el-radio-group v-model="filter.sale_status">
              <el-radio
                  :label="item.value"
                  v-for="(item, idx) in [
                  {value: 0, label: '全部'},
                  {value: 1, label: '在售'},
                  {value: 2, label: '仓库'}]"
                  :key="idx">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="text-align: right;margin-top: 10px">
        <el-button icon="el-icon-refresh" @click.stop="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click.stop="doSearch">搜索</el-button>
      </div>
    </template>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, reactive, Ref, ref, toRefs} from 'vue'

export default defineComponent({

  name: 'goods-advanced-search',

  emits: ['search'],

  setup(props, {emit}) {
    const dialog: Ref = ref(null)
    const state = reactive({
      filter: {
        keyword: '',
        sale_status: 0,
        min_price: 0,
        max_price: 0,
        cat_id: '',
        goods_type: 0,
        use_integral_type: 0
      },
      filterInit: {
        keyword: '',
        sale_status: 0,
        min_price: 0,
        max_price: 0,
        cat_id: '',
        goods_type: 0,
        use_integral_type: 0
      }
    })
    const show = (data: { [k: string]: string | number }): void => {
      // for (let i in data) state.filter[i] = data[i]
      state.filter = {...state.filter, ...data}
      console.log(state.filter)
      dialog.value.show()
    }

    const close = (): void => {
      dialog.value.close()
    }

    const reset = (): void => {
      state.filter = {...state.filter, ...state.filterInit}
      // for (let i in state.filterInit) state.filter[i] = state.filterInit[i]
    }

    const doSearch = (): void => {
      emit('search', state.filter)
      close()
    }

    return {
      ...toRefs(state),
      dialog,
      show,
      reset,
      doSearch
    }
  }
})
</script>